<template>
    <div class="box-card box-minheight">
        <div class="card-header">
            <span>{{ curRouteName }}</span>
        </div>
        <div class="box-content">
            <el-form :inline="true" :model="searchForm" ref="searchFormRef">
                <el-form-item label="分类名称">
                    <el-select v-model="searchForm.className" placeholder="请选择分类名称" clearable filterable>
                        <el-option label="源" value="0" />
                        <el-option label="储" value="1" />
                        <el-option label="荷" value="2" />
                        <!-- <el-option label="电网参数" value="3" />
                        <el-option label="发电机组" value="4" />
                        <el-option label="负荷监测" value="5" />
                        <el-option label="储能设备" value="6" />
                        <el-option label="太阳能光伏" value="7" />
                        <el-option label="风力发电" value="8" />
                        <el-option label="逆变器监测" value="9" />
                        <el-option label="电表" value="10" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-select v-model="searchForm.deviceName" placeholder="请选择设备名称" clearable filterable>
                        <el-option label="1号电表" value="0" />
                        <el-option label="2号逆变器" value="1" />
                        <el-option label="3号电表" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" size="default" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>

            <div class="alert">
                <div class="alert-Content">
                    <div class="alert-left">
                        <el-icon :size="20" color="#409EFC">
                            <WarningFilled />
                        </el-icon>
                        异常设备:<span class="red-text">0</span>
                    </div>
                    <div class="alert-right">
                        <el-icon :size="20" color="#409EFC">
                            <Refresh />
                        </el-icon>
                        刷新
                    </div>
                </div>
            </div>

            <div class="mt15">
                <el-table :data="gridData" border :height="tableHeight">
                    <el-table-column prop="categoryName" label="分类名称"></el-table-column>
                    <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                    <el-table-column prop="status" label="通讯状态"></el-table-column>
                    <!-- <el-table-column prop="voltageA" label="A相电压（V）"></el-table-column>
                    <el-table-column prop="voltageB" label="B相电压（V）"></el-table-column>
                    <el-table-column prop="voltageC" label="C相电压（V）"></el-table-column>
                    <el-table-column prop="currentA" label="A相电流（A）"></el-table-column>
                    <el-table-column prop="currentB" label="B相电流（A）"></el-table-column>
                    <el-table-column prop="currentC" label="C相电流（A）"></el-table-column>
                    <el-table-column prop="power" label="功率（W）"></el-table-column>
                    <el-table-column prop="frequency" label="频率（Hz）"></el-table-column> -->
                    <el-table-column prop="timestamp" label="更新时间"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="text" @click="showDrawer(row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                    <!-- 添加更多的字段 -->
                </el-table>
                <!-- 分页器 -->
                <el-pagination class="mt15" v-model:current-page="pageNo" v-model:page-size="pageSize"
                    :page-sizes="[5, 7, 9, 11]" :background="true" layout="prev, pager, next, jumper,->,sizes,total"
                    :total="total" @current-change="getDetails" @size-change="handler" />
            </div>
        </div>
    </div>
    <Details ref="details" :drawerVisible="drawerVisible" @closeDetails="closeDetails"></Details>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed, reactive, onMounted, onBeforeUnmount } from 'vue'
import type { FormInstance } from 'element-plus'
import Details from '@/views/dataMonitor/gathershow/details.vue'

//获取路由对象
let $route = useRoute()
// 计算出当前路由名称
let curRouteName = computed(() => {
    return $route.matched[$route.matched.length - 1].meta.title
})
const searchFormRef = ref<FormInstance>()
const searchForm = reactive({
    className: '0',
    deviceName: '2',
})
const handleSearch = () => {
    console.log('submit!')
}
//重置按钮
const handleReset = () => {
}
interface GridDataItem {
    categoryName: string;
    deviceName: string;
    timestamp: string;
    status: string,
    voltageA: number;
    voltageB: number;
    voltageC: number;
    currentA: number;
    currentB: number;
    currentC: number;
    power: number;
    frequency: number;
    // 添加更多的字段
}
const gridData = ref<GridDataItem[]>([
    { categoryName: '源', deviceName: '设备1', timestamp: '2022-01-01 10:00:00', status: '正常', voltageA: 220, voltageB: 220, voltageC: 220, currentA: 5, currentB: 5, currentC: 5, power: 1100, frequency: 50 },
    { categoryName: '储', deviceName: '设备2', timestamp: '2022-01-01 10:01:00', status: '异常', voltageA: 218, voltageB: 218, voltageC: 218, currentA: 4.8, currentB: 4.8, currentC: 4.8, power: 1046, frequency: 50 },
    // 添加更多的数据项
]);

const details = ref()
const drawerVisible = ref(false);
const showDrawer = (row: GridDataItem) => {
    console.log(row)
    // currentStorage.value = row;
    drawerVisible.value = true;
};

const closeDetails = (v: any) => {
    drawerVisible.value = v;
}

//默认页码
let pageNo = ref<number>(1);
//一页展示几条数据
let pageSize = ref<number>(5);
//总个数
let total = ref<number>(0);

//获取全部已有的用户信息
const getDetails = async (pager = 1) => {
    //收集当前页码
    pageNo.value = pager;
    // let result: UserResponseData = await reqUserInfo(pageNo.value, pageSize.value, keyword.value);
    // if (result.code == 200) {
    //     total.value = result.data.total;
    //     userArr.value = result.data.records;
    // }
}
//分页器下拉菜单的自定义事件的回调
const handler = () => {
    getDetails();
}
const tableHeight = ref(0); // 表格高度
// 计算表格高度的函数
const calculateTableHeight = () => {
    const windowHeight = window.innerHeight - 180; // 获取窗口高度
    const tableHeaderHeight = 40; // 表格头部高度
    const tablePaginationHeight = 60; // 表格分页高度
    const padding = 20; // 上下边距
    tableHeight.value = windowHeight - tableHeaderHeight - tablePaginationHeight - padding;
};

// 监听窗口大小变化，动态计算表格高度
const handleResize = () => {
    calculateTableHeight();
};

onMounted(() => {
    calculateTableHeight();
    window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
})
</script>

<style scoped lang="scss">
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}
</style>